<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <form action="" method="post">
      商品名称: <input type="text" name="prdName" /> <br />
      生产日期: <input type="date" name="prdDate" /> <br />
      保质期: <input type="text" name="interval" />天 <br />
      失效日期: <input type="text" name="outDate" readonly /> <br />
      <input type="button" value="录入" />
    </form>
    <script>
      $(function () {
        // 计算过期函数
        function calcuateOutDate() {
          let prdDate = $('[name="prdName"]').val();
          let interval = $('[name="interval"]').val();
          let outDate = '';
          if (prdDate && interval) {
            let pDate;
            if (prdDate.indexof('-') !== -1) {
              let array = prdDate.split('-');
              if (array.length > 2) {
                pDate = new Date(Number(array[0]), Number(array[1]), Number(array[2]));
              }
            } else {
              if (prdDate.indexof !== -1) {
                let array = prdDate.split('/');
                if (array.length > 2) {
                  pDate = new Date(Number(array[0]), Number(array[1]), Number(array[2]));
                }
              }
            }
          }
        }
        // 事件触发机制
        $('[name="prdName"]').blur(calcuateOutDate());
        $('[name="interval"]').blur(calcuateOutDate());
      });
    </script>
  </body>
</html>
